<template>
    <div>
        <el-container>
            <!-- 上半区域：顶栏 -->
            <el-header class="layout-header">
                <!-- 顶栏右侧的当前用户信息及下拉菜单 -->
                <div class="login-user">
                    <span class="welcome">请发布文章，<b>{{ loginInfo.name }}</b>！</span>
                    <el-dropdown @command="handleCommand">
                        <el-avatar shape="square" size="medium"
                                   :src="loginInfo.avatar"></el-avatar>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-document" command="personal">个人中心</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-right" divided command="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <!-- 顶栏的标题文字 -->
                <div>
                    <a href="/home" style="display: block">
                        <img src="/img/syc.jpg" style="float: left;height: 65px;margin:0 20px 0 20px">
                    </a>
                    <h1>文章发布</h1>
                </div>
            </el-header>
            <el-main class="center" style="width: 1200px;margin: 0 auto">
                <el-row :gutter="10">
                    <el-col :span="4">
                        <el-card style="height: 800px">
                            <el-menu style="border: 0"  active-text-color="#69bb55">
                                <el-menu-item index="1" style="font-size: 16px" @click="gotoPost()"> 文章发布</el-menu-item>
                                <el-menu-item index="2" style="font-size: 16px" @click="gotoManagement()">文章管理</el-menu-item>
                            </el-menu>
                        </el-card>
                    </el-col>
                    <el-col :span="20">
                      <router-view/>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>
<style>
body{
    background-color: rgb(241,242,243);
    margin: 0;
}

.layout-header {
    background: #69bb55;
}

.layout-header .login-user {
    float: right;
    margin-top: 12px;
    display: flex;
}

.layout-header .login-user .welcome {
    line-height: 36px;
    color: #fff;
    margin-right: 10px;
}

.layout-header h1 {
    margin: 0;
    color: #fff;
    line-height: 70px;
    font-size: 20px;
}
.el-header{
    background-color: #69bb55;
}
.center{width: 1200px;margin: 0 auto}
footer h3{
    color: white;
}
#footer_center p{
    margin: 0;
}



</style>
<script>
import BaseUrl from "@/http/BaseUrl";
import TokenAxios from "@/http/TokenAxios";

export default {
    data(){
        return {
            loginInfo:[],
        }
    },
    methods: {
        loadCurrentLoginInfo(){
          let loginInfoString=localStorage.getItem('loginInfo')

          this.loginInfo = JSON.parse(loginInfoString);
          if (!this.loginInfo) {
            this.$router.push('/login/user');
            return;
          }else if (this.loginInfo.role!==3&&this.loginInfo.role!==4){
            this.$message.error('无权访问');
            this.$router.push('/home');
            return;
          }
        },
        gotoPost() {
            if (this.$route.path!=='/article/postArticle') {
                this.$router.push('/article/postArticle');
            }
        },
        gotoManagement() {
            if (this.$route.path!=='/article/manageArticle') {
                this.$router.push('/article/manageArticle');
            }
        },
        handleCommand(command) {
            if (command === 'personal') {
                this.$router.push('/personal/doctor')
            } else if (command === 'logout') {
                this.openLogoutConfirm();
            }
        },
        openLogoutConfirm(){
            let message = '即将退出登录，是否继续？';
            this.$confirm(message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.handleLogout();
            }).catch(() => {
            });
        },
        handleLogout(){
            let url = BaseUrl.PASSPORT + '/passport/users/logout';
            console.log('url = ' + url);

            TokenAxios.post(url).then((response) => {
                let jsonResult = response.data;
                if (jsonResult.state === 20000) {
                    this.$message({
                        message: '退出登录成功！',
                        type: 'success'
                    });
                    localStorage.removeItem('loginInfo');
                    this.$router.push('/home');
                } else {
                    this.$alert(jsonResult.message, '错误', {
                        confirmButtonText: '确定',
                        callback: action => {
                        }
                    });
                }
            });
        },

    },
    created() {
    },
    mounted() {
        this.loadCurrentLoginInfo();
    }
}

</script>
